<template>
  <div class="index act" id="index">
    <Header active="0"></Header>
    <div class="banner" v-if="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(i, index) in banner" :key="index">
            <div class="img"><img :src="i.image" alt="" /></div>
            <div class="banTxt f24 flex">
              <div class="inner">
                <div v-html="i.content" v-if="i.content"></div>
                <!--                               <div class="tit1 font-b" v-html="i.title" v-if="i.title"></div>
                                <div class="tit2" v-html="i.title2" v-if="i.title2"></div> -->
                <div class="btns flex">
                  <a class="btn on" :href="i.link1" v-if="i.link1">{{
                    i.text1
                  }}</a>
                  <a class="btn" :href="i.link2" v-if="i.link2">{{
                    i.text2
                  }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="circleDots"></div>
    </div>
    <div class="index1">
      <div class="inner">
        <div class="title">
          <div class="t f60 font-m t1">Statistics of AITEP</div>
        </div>
        <div class="charts flex">
          <div class="cl">
            <div class="box">
              <div class="bt f24 font-m">{{ info.chartData[0].title }}</div>
              <div class="ch1">
                <div id="chart1" class="chartcontainer"></div>
              </div>
            </div>
            <div class="box">
              <div class="bt f24 font-m">{{ info.chartData[1].title }}</div>
              <div class="ch2">
                <div id="chart2" class="chartcontainer"></div>
              </div>
            </div>
          </div>
          <div class="cr flex">
            <div class="box ch3 f16 flex">
              <div class="i">
                <div class="hd">
                  <span class="f60 font-b">{{ productNum.manufacturer }}</span
                  ><span>+</span>
                </div>
                <div class="it">Manufacturers</div>
              </div>
              <div class="i">
                <div class="hd">
                  <span class="f60 font-b">{{ productNum.products }}</span
                  ><span>+</span>
                </div>
                <div class="it">Products</div>
              </div>
              <div class="i">
                <div class="hd">
                  <span class="f60 font-b">{{ productNum.api }}</span
                  ><span>+</span>
                </div>
                <div class="it">API</div>
              </div>
            </div>
            <div class="box ch4">
              <div id="chart3" class="chartcontainer"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="index2"
      :style="{
        background: 'url(' + technicalInfo.image + ') no-repeat top center',
      }"
    >
      <div class="inner">
        <div class="title">
          <div class="t f60 font-m t2">Technical Routes</div>
        </div>
        <div class="txt" v-html="technicalInfo.content"></div>
        <!-- <img src="/uploadfiles/index2.png" alt=""> -->
      </div>
    </div>
    <div class="index3">
      <div class="inner">
        <div class="title">
          <div class="t f60 font-m t3">Data Sources</div>
        </div>
        <div class="map">
          <div class="img"><img src="/uploadfiles/map.png" alt="" /></div>
          <div class="mls">
            <div
              :key="idx"
              v-for="(i, idx) in DataSources"
              @click.stop="mapClick(idx)"
              :class="[
                'i',
                { vr: latLngToPosition(i.lngLat).x < 50 },
                { vb: latLngToPosition(i.lngLat).y > 50 },
                { act: curMap == idx },
                {min:i.id==1513||i.id==1507}
              ]"
              :style="
                'left:' +
                latLngToPosition(i.lngLat).x +
                '%;top:' +
                latLngToPosition(i.lngLat).y +
                '%;'
              "
            >
              <div class="idot"><i></i></div>
              <div class="it">{{ i.title }}</div>
              <div class="hov">
                <div class="iline"></div>
                <div class="itxt">
                  <div
                    class="con overscroll"
                    :style="{ overflow: moreTrue != i.id ? 'hidden' : 'auto',maxHeight: moreTrue != i.id ? 'fit-content' : ''}"
                  >
                    <div class="l f28 font-b">
                      数据库总数：
                      <div class="lt f24 font-b" @click="goDetail(i.id, idx)">
                        {{ i.child.length }}
                      </div>
                    </div>
                    <div class="l f28 font-b">
                      数据库列表：
                      <div
                        v-for="j in moreTrue == i.id
                          ? i.child
                          : i.child.slice(0, 4)"
                        :key="j.id"
                      >
                        <div class="lt f24 font-b" @click="goDetail(i.id, idx)">
                          {{ j.title }}
                        </div>
                        <!-- <div class="lp f16" v-html="j.content"></div> -->
                      </div>
                      <div
                        class="f18 more_btn"
                        v-if="i.child.length > 4 && moreTrue != i.id"
                        @click="moreClick(i.id)"
                      >
                        更多
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import da from "@/public/js/data.json";

import {
  getArticleLists,
  manufacture_product_api,
  getCloumnList,
  index_statistics,
} from "@/api/sections";
export default {
  async setup() {
    const info = {
      banner: [],
      chartData: [
        {
          title: "Product and dosage form",
          data: [
            {
              name: "Tablets",
              value: 880,
              color: "#76c0dd",
            },
            {
              name: "Cream",
              value: 545,
              color: "#1e9da8",
            },
            {
              name: "Capsules",
              value: 660,
              color: "#fd6f72",
            },
            {
              name: "Syrup",
              value: 650,
              color: "#f9c75f",
            },
            {
              name: "Liquid",
              value: 120,
              color: "#92cc78",
            },
            {
              name: "Other",
              value: 220,
              color: "#5069b5",
            },
            {
              name: "Other",
              value: 220,
              color: "#f9c75f",
            },
          ],
        },
        {
          title: "Product and administration route",
          data: [
            {
              name: "Oral",
              value: 3215,
              color: "#1e9da8",
            },
            {
              name: "External",
              value: 320,
              color: "#a0e084",
            },
            {
              name: "Topical",
              value: 220,
              color: "#f9c75f",
            },
            {
              name: "Other",
              value: 140,
              color: "#ec6568",
            },
          ],
        },
        {
          title: "",
          data: [
            {
              name: "Manufacturers",
              value: 21,
              color: "",
            },
            {
              name: "Products",
              value: 4084,
              color: "",
            },
            {
              name: "API",
              value: 438,
              color: "#",
            },
          ],
        },
      ],
    };
    const Miserables = da;
    return {
      info,
      Miserables,
    };
  },
  data() {
    return {
      banner: [],
      curMap: -1,
      productNum: {},
      technicalInfo: {},
      DataSources: [],
      moreTrue: "0",
    };
  },
  methods: {
    mapClick(e) {
      console.log(e, 1111111111111);
      let idx = e;
      getArticleLists({
        cid: this.DataSources[e].id,
        ext: "content",
        mid: 17,
      }).then((res) => {
        this.DataSources[idx].child = res.data;
        this.curMap = e;
      });
    },
    latLngToPosition: function (lnglat) {
      const mapWidth = 1600;
      const mapHeight = 795;
      const pos = lnglat.split(",");
      const lng = Number(pos[0]);
      const lat = Number(pos[1]);
      const mapX = (lng + 170) * (mapWidth / 350);
      const mapY = (90 - lat) * (mapHeight / 155);
      const mapPercentageX = (mapX / mapWidth) * 100;
      const mapPercentageY = (mapY / mapHeight) * 100;
      return {
        x: mapPercentageX,
        y: mapPercentageY,
      };
    },
    getTotal: function (arr, key) {
      let t = 0;
      arr.forEach((i) => {
        t += i[key];
      });
      return t;
    },
    renderBar: function (el, data, type) {
      const that = this;
      let ispc = $(window).width() >= 1024;
      let types = [
        {
          radius: "78%",
          titleSize: ispc ? 24 : 18,
          titleTop: "top",
          legendPos: {
            right: 10,
            top: "center",
            orient: "vertical",
          },
          itemStyle: {},
        },
        {
          radius: ["40%", "80%"],
          titleSize: ispc ? 28 : 18,
          titleTop: "center",
          legendPos: {
            left: "center",
            top: "bottom",
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 1,
          },
        },
      ];
      let colors = [];
      let total = that.getTotal(data, "value");
      data.map((i) => {
        colors.push(i.color);
      });
      let opt = {
        animation:false,
        title: {
          text: "Total:" + total,
          left: "center",
          top: types[type].titleTop,
          textStyle: {
            color: "#242626",
            textBorderColor: "#fff",
            textBorderWidth: 1,
            fontSize: types[type].titleSize,
          },
        },
        color: colors,
        tooltip: {
          trigger: "item",
        },

        legend: {
          show: true,
          orient: types[type].legendPos.orient || "horizontal",
          left: types[type].legendPos.left || "auto",
          right: types[type].legendPos.right || "auto",
          top: types[type].legendPos.top || "auto",
          bottom: types[type].legendPos.bottom || "auto",
          itemWidth: ispc ? 32 : 20,
          itemHeight: ispc ? 18 : 14,
          itemGap: ispc ? 12 : 8,
          textStyle: {
            fontSize: ispc ? 14 : 12,
          },
        },
        series: [
          {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            type: "pie",
            itemStyle: types[type].itemStyle,
            radius: types[type].radius || "90%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      if (!el) {
        return;
      }
      let chart = echarts.init(el);
      chart.setOption(opt);
      const container = document.getElementById("index");
      window.addEventListener("resize", () => {
        chart.resize();
      });
      new ResizeObserver(() => {
        chart.resize();
      }).observe(container);
    },
    renderRelationMap: function (el, data) {
      let nodes = [];
      let category = [
        {
          name: "Manufacturer",
        },
        {
          name: "Product",
        },
        {
          name: "API",
        },
      ];
      let company = [];
      let links = [];
      data.forEach(function (i, a) {
        (i.symbolSize = 16), (i.category = 1);
        i.id = a + "_" + i.itemid;
        nodes.push(i);
        links.push({
          source: i.certificate_holder.itemid,
          target: i.itemid,
          select: {
            disabled: true,
          },
        });
        if (!company.includes(i.certificate_holder.itemid)) {
          let companynode = i.certificate_holder;
          companynode.id = a + "_2_" + i.certificate_holder.itemid;
          companynode.category = 0;
          companynode.symbolSize = 20;
          company.push(i.certificate_holder.itemid);
          nodes.push(companynode);
        }
        i.apis.forEach(function (j, b) {
          let apinode = j;
          let date = new Date().getTime();
          apinode.id = a + "_3_" + b;
          apinode.category = 2;
          apinode.symbolSize = 8;
          nodes.push(apinode);
          links.push({
            source: i.itemid,
            target: j.itemid + b,
            select: {
              disabled: true,
            },
          });
        });
      });
      let opt = {
        
        tooltip: {
          triggerOn: "click",
          formatter: function (params) {
            console.log(params.data, 11111111111);
            let str = "";
            let cat = params.data.category + 1;
            let id = params.data.itemid;
            if (!cat) {
              return null;
            }
            switch (cat) {
              case 1: {
                str = `Manufacture:<br/><a class="tooltiplink" href="/cn/Manufacturers?id=${id}">${params.data.name}</a>`;
                break;
              }
              case 2: {
                str = `Product:<br/><a class="tooltiplink" href="/cn/Products?id=${id}">${params.data.name}</a>`;
                break;
              }
              case 3: {
                str = `API:<br/><a class="tooltiplink" href="/cn/APIs?id=${id}">${params.data.name}</a>`;
                break;
              }
              default: {
                str = `${params.data.name}`;
                break;
              }
            }
            return str;
          },
        },
        legend: [
          {
            data: category.map((i) => {
              return i.name;
            }),
            show: true,
          },
        ],
        color: ["#538fd0", "#ec6861", "#f9e690"],
        series: [
          {
            type: "graph",
            draggable: true,
            large:true,
            layout: "force",
            force: {
              edgeLength: [15, 50],
              repulsion: [15, 50],
              gravity: 0.1,
            },
            data: nodes,
            links: links,
            categories: category,
            roam: true,
            top: "15%",
            label: {
              position: "right",
            },
          },
        ],
      };
      if (!el) {
        return;
      }
      let chart = echarts.init(el);
      chart.setOption(opt);
      const container = document.getElementById("index");
      window.addEventListener("resize", () => {
        chart.resize();
      });
      new ResizeObserver(() => {
        chart.resize();
      }).observe(container);
    },
    moreClick: function (id) {
      this.moreTrue = id;
    },
    goDetail: function (id, ind) {
      this.$router.push(`/About/Source?id=${id}&ind=${ind}`);
    },
  },
  mounted: function () {
    var that = this;
    getArticleLists({
      cid: 1426,
      ext: "content,text1,link1,text2,link2",
      mid: 17,
    }).then((res) => {
      console.log(res, 222222);
      that.banner = res.data;
	  
	  let auto={
            speed: 800,
       }
	  let loop=true
		  if(that.banner.length<=1){
			  auto=false
			  loop=false
		  }
      that.$nextTick(() => {
        var swiper = new Swiper(".banner .swiper-container", {
          loop: loop,
          autoplay:auto,
          pagination: {
            el: ".banner .circleDots",
            clickable: true,
            renderBullet: function (index, className) {
              return (
                '<span class="' +
                className +
                '"><svg  width="50" height="50" viewBox="0 0 50 50"><circle id="circle" cx="23" cy="23" r="21"  fill="transparent" stroke-width="2" stroke="#fff" /></svg></span>'
              );
            },
          },
        });
      });
    });
    index_statistics({}).then((res) => {
      that.productNum = res.data.static;
      let administration_route = [];
      let dosage_from = [];
      res.data.dosage_from.some((item, index) => {
        let i = {
          name: item.dosage_form,
          value: item.count,
          color: that.info.chartData[0].data[index]
            ? that.info.chartData[0].data[index].color
            : "538fd0",
        };
        dosage_from.push(i);
      });
      res.data.administration_route.some((item, index) => {
        let i = {
          name: item.administration_route,
          value: item.count,
          color: that.info.chartData[1].data[index]
            ? that.info.chartData[1].data[index].color
            : "538fd0",
        };
        administration_route.push(i);
      });

      that.renderBar(document.getElementById("chart1"), dosage_from, 0);
      that.renderBar(
        document.getElementById("chart2"),
        administration_route,
        1
      );
      console.log(res, 222222);
    });

    manufacture_product_api({}).then((res) => {
      console.log(res, 99999);
      that.renderRelationMap(document.getElementById("chart3"), res.data);
    });

    that.$nextTick(() => {
      // getCloumnList({
      //   id: 1447,
      // }).then((res) => {
      //   console.log(res, 222222);
      //   that.DataSources = [];
      //   res.data.some((item) => {
      //     let i = {
      //       id: item.id,
      //       title: item.name,
      //       lngLat: `${item.subname},${item.ename}`,
      //       child: [],
      //     };
      //     that.DataSources.push(i);
      //   });
      // });
      getCloumnList({ id: 1438 }).then((res) => {
        that.DataSources = [];
        res.data.some((item) => {
          let i = {
            id: item.id,
            title: item.name,
            lngLat: `${item.subname},${item.ename}`,
            child: [],
          };
          that.DataSources.push(i);
        });
      });

      getArticleLists({
        cid: 1446,
        ext: "content",
        mid: 17,
      }).then((res) => {
        console.log(res, 222222);
        if (res.data && res.data.length > 0) {
          that.technicalInfo = res.data[0];
        }
      });
    });

    $(window)
      .scroll(function () {
        if ($(this).scrollTop() > 100) {
          $(".index").removeClass("act");
        } else {
          $(".index").addClass("act");
        }
      })
      .trigger("scroll");
    // $(".map .i").click(function(e) {
    // 	console.log($(this).index(),11111111)
    // 	let idx=$(this).index()

    // 	getArticleLists({
    // 		'cid': this.DataSources[idx].id,
    // 		ext: 'content',
    // 		mid: 17,
    // 	}).then((res) => {
    // 		 this.DataSources[idx].child=res.data
    // 		console.log(res, 222222)
    // 		$(this).addClass('act').siblings().removeClass('act');

    // 	})
    // 	e.stopPropagation();
    // });
    $("body").click(function () {
      $(".map .i").removeClass("act");
    });
  },
};
</script>